<template>
  <div :class="tag_class">{{name}}</div>
</template>

<script>

export default {
  name: "Tag",
  props:{
    name:{
      type:String,
      required:true
    },
    color:{
      default:"normal"
    }
  },
  computed:{
     tag_class() {
      let k = this.$store.state.skin;
      let m = k == true ? "light" : "dark";
      return ["item",m+'_'+this.color];
    },
  }
};
</script>

<style lang="less" scoped>
@import '../main.less';
.light_normal {
  border: 1px solid @bt_deep_light;
  transition: all 1s;
}
.dark_normal {
  border: 1px solid @bt_deep_dark;
  transition: all 1s;
}
.light_danger {
  border: 1px solid rgb(246, 100, 100);
}
.dark_danger {
  border: 1px solid rgb(145, 59, 59);
}
.item{
  height: 100%;
  padding: 0 5px;
  font-size: 12px;
  .juzhong;
  margin-right: 2px;
}
</style>